<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

defineProps({
  message: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'success'
  }
})

const isShow = ref(false)

let timer
onMounted(() => {
  isShow.value = true
  timer = setTimeout(() => {
    isShow.value = false
  }, 2000)
})
onBeforeUnmount(() => {
  clearTimeout(timer)
  timer = null
  isShow.value = false
})
</script>

<template>
  <Transition name="down">
    <div class="message-container" v-if="isShow">
      <div class="zy-message" :class="type">
        <svg-icon class="message-icon" :icon-name="type" />
        <span class="text">{{ message }}</span>
      </div>
    </div>
  </Transition>
</template>

<style lang="scss" scoped>
// transition动画会导致fixed定位初始化错乱
.message-container {
  width: 100%;
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 1000;
  top: 20px;
}
.zy-message {
  padding: 11px 15px;
  // box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border-width: 1px;
  border-style: solid;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  .message-icon {
    font-size: 16px;
    margin-right: 5px;
    color: inherit;
  }
  .text {
    color: inherit;
    font-size: 16px;
  }
}

.success {
  color: #67c23a;
  border-color: #e1f3d8;
  background-color: #f0f9eb;
}
.warning {
  color: #e6a23c;
  border-color: #faecd8;
  background-color: #fdf6ec;
}
.error {
  color: #f56c6c;
  border-color: #fde2e2;
  background-color: #fef0f0;
}

/* 进入起点&离开终点 */
.down-enter-from,
.down-leave-to {
  transform: translateY(-35px);
  opacity: 0;
}
.down-enter-active,
.down-leave-active {
  transition: all 0.3s;
}
/* 进入终点&离开起点 */
.down-enter-to,
.down-leave-from {
  transform: translateY(0px);
  opacity: 1;
}
</style>
